<%-- 
    Document   : index
    Created on : 18-ene-2009, 19:55:36
    Author     : germinus
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<sql:query var="type_medicines" dataSource="jdbc/cardeacontrol">
    SELECT id, mName FROM medicine_types
</sql:query>
<sql:query var="type_events" dataSource="jdbc/cardeacontrol">
    SELECT id, meName FROM medicine_events_type
</sql:query>

<sql:query var="type_localizations" dataSource="jdbc/cardeacontrol">
    SELECT id, lName FROM localization
</sql:query>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- <script type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script type="text/javascript" src="js/ui.datepicker.js"></script> -->


<link type="text/css" href="css/ui.all.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jtps-0.4.js"></script>


<link rel="stylesheet" href="css/jtps.css" type="text/css" media="screen" />
<!-- <link rel="stylesheet" href="css/ui.core.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ui.all.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ui.datepicker.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ui.theme.css" type="text/css" media="screen" /> -->




<script  type="text/javascript">
    var searchFor = 0;
    var num_result = 0;
    function checkDate(){
        dateFrom = $("#fromDate").val();
        dateTo = $("#toDate").val();
        if(dateFrom !="" && dateTo !=""){
            dateFromList = dateFrom.split("/");
            dateToList = dateTo.split("/");

            var fromDate=new Date();
            var toDate = new Date();
            fromDate.setFullYear(dateFromList[2],(dateFromList[1]-1),dateFromList[0]);
            toDate.setFullYear(dateToList[2],(dateToList[1]-1),dateToList[0]);
            if (fromDate>toDate){
                var html="<div class='ui-state-error ui-corner-all' style='padding: 0 .2em;'>";
                html+="<p><span class='ui-icon ui-icon-alert' style='float: left; margin-right: .3em;'></span>";
                html+="Por favor, elija un rango v&aacute;lido de fechas.</p>";
                html+="</div>";
                $("#errorDiv").html(html);
                return false;
            }

        }


        return true;
    }

    function searchStock(){
        $("#errorDiv").html("");
        if(checkDate()){
            searchFor = $("#type_id_stock").val();
            
            $.get("stock_response.jsp",
            { type_id: searchFor},
            function(data){
                $("#results_stock").html(data);
                $("#stock_results").jTPS( {perPages:[20,50,'Todas'],scrollStep:1,scrollDelay:30} );
                // bind mouseover for each tbody row and change cell (td) hover style
                $('#stock_results tbody tr:not(.stubCell)').bind('mouseover mouseout',
                function (e) {
                    // hilight the row
                    e.type == 'mouseover' ? $(this).children('td').addClass('hilightRow') : $(this).children('td').removeClass('hilightRow');
                }
            );


            }
        );
        }
    }

    function searchEvents(){
        $("#errorDiv").html("");
        if(checkDate()){
            searchFor = $("#type_id").val();
            eventType = $("#type_event_id").val();
            locationType = $("#type_localization_id").val();
            code = $("#code").val();
            dateFrom = $("#fromDate").val();
            if(dateFrom !=""){
                dateFromList = dateFrom.split("/");
                newDateFrom= dateFromList[2] + "-" + dateFromList[1] + "-" + dateFromList[0] + " 00:00:00";
            }else{
                newDateFrom="";
            }

            dateTo = $("#toDate").val();
            if(dateTo !=""){
                dateToList = dateTo.split("/");
                newDateTo= dateToList[2] + "-" + dateToList[1] + "-" + dateToList[0] + " 23:59:59";}
            else{
                newDateTo="";
            }

            $.get("response.jsp",
            { type_id: searchFor, fromDate: newDateFrom, toDate: newDateTo, loc_id: locationType, code: code, type_event: eventType},
            function(data){
                $("#results").html(data);
                $("#event_results").jTPS( {perPages:[20,50,'Todas'],scrollStep:1,scrollDelay:30} );
                // bind mouseover for each tbody row and change cell (td) hover style
                $('#event_results tbody tr:not(.stubCell)').bind('mouseover mouseout',
                function (e) {
                    // hilight the row
                    e.type == 'mouseover' ? $(this).children('td').addClass('hilightRow') : $(this).children('td').removeClass('hilightRow');
                }
            );


            }
        );
        }
    }

    // $('#startDate').datepick({dateFormat: 'dd/mm/yy'});
    jQuery(function($){
        $.datepicker.regional['es'] = {clearText: 'Limpiar', clearStatus: '',
            closeText: 'Cerrar', closeStatus: '',
            prevText: '&lt;Ant', prevStatus: '',
            nextText: 'Sig&gt;', nextStatus: '',
            currentText: 'Hoy', currentStatus: '',
            monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
                'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
            monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
                'Jul','Ago','Sep','Oct','Nov','Dic'],
            monthStatus: '', yearStatus: '',
            weekHeader: 'Sm', weekStatus: '',
            dayNames: ['Domingo','Lunes','Martes','Mi&eacute;rcoles','Jueves','Viernes','S&aacute;dabo'],
            dayNamesShort: ['Dom','Lun','Mar','Mi&eacute;','Juv','Vie','S&aacute;b'],
            dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S&aacute;'],
            dayStatus: 'DD', dateStatus: 'D, M d',
            dateFormat: 'dd/mm/yy', firstDay: 0,
            initStatus: '', isRTL: false};
        $.datepicker.setDefaults($.datepicker.regional['es']);
    });
    $(document).ready(function(){
        var now = new Date();
        today = now.getDate() +"/" + (now.getMonth()+1) + "/" + now.getFullYear() ;
        $('#fromDate').val(today);
        $('#toDate').val(today);

        $('.dateRange').datepicker({beforeShow: customRange});

        // Customize two date pickers to work as a date range


        $('#fromDate').datepicker();
        $('#toDate').datepicker();

        function customRange(input) {
            return {minDate: (input.id == 'fromDate' ? $('#fromDate').datepicker('getDate') : null),
                maxDate: (input.id == 'toDate' ? $('#toDate').datepicker('getDate') : null)};
        }

    });

    jQuery(function($){

        $('#tabs').tabs();
    });


    function showDetails(id){
        $.get("medicine_details.jsp",
        { med_id: id},
        function(data){
            $("#details").html(data);
            
            $("#details").dialog("destroy");
            $("#details").dialog();
            return false;

        }
    )

    }
</script>


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Cardea Control</title>
        <link rel="stylesheet" type="text/css" href="css/cardea.css">

    </head>
    <body>
        <h1>Bienvenidos al sistema de control de Cardea</h1>

        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Actividad</a></li>
                <li><a href="#tabs-2">Stock</a></li>
            </ul>
            <div id="tabs-1">



                <div id="medicine_query">
                    <table  border="0">
                        <thead>
                            <tr>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Vea la actividad del sistema cardea:
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table>
                                        <tr>
                                            <td colspan="2">
                                                <strong>Seleccione medicina</strong>

                                                <select id="type_id" name="type_id">
                                                    <option value="0">Todas</option>
                                                    <c:forEach var="type_medicine" items="${type_medicines.rows}">
                                                        <option value="${type_medicine.id}">${type_medicine.mName}</option>
                                                    </c:forEach>
                                                </select>
                                            </td>
                                            <td>

                                                <input type="button" value="ver" name="button" onclick="searchEvents();"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Tipo de evento</strong>

                                                <select id="type_event_id" name="type_event_id">
                                                    <option value="0">Todos</option>
                                                    <c:forEach var="type_event" items="${type_events.rows}">
                                                        <option value="${type_event.id}">${type_event.meName}</option>
                                                    </c:forEach>
                                                </select>
                                            </td>
                                            <td>
                                                <strong>Localizaci&oacute;n</strong>

                                                <select id="type_localization_id" name="type_localization_id">
                                                    <option value="0">Todos</option>
                                                    <c:forEach var="type_localization" items="${type_localizations.rows}">
                                                        <option value="${type_localization.id}">${type_localization.lName}</option>
                                                    </c:forEach>
                                                </select>
                                            </td>
                                            <td> <strong>C&oacute;digo</strong>
                                            <input type="text" id="code" value="" size="9"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <strong>Desde: </strong>
                                                <input type="text" id="fromDate" value="" size="9"/>
                                            </td><td>
                                                <strong>Hasta: </strong>
                                                <input type="text" id="toDate" value="" size="9"/>
                                            </td>
                                            <td></td>
                                        </tr>


                                    </table>
                                    <div id="errorDiv"class="ui-widget">

                                    </div>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>



                <div id="results"> </div>

                <div id="details" title="Detalle"></div>
            </div>
            <div id="tabs-2">

                 <div id="medicine_stock">
                    <table  border="0">
                        <thead>
                            <tr>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Obtenga el inventario de Cardea:
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <table>
                                        <tr>
                                            <td colspan="2">
                                                <strong>Seleccione medicina</strong>

                                                <select id="type_id_stock" name="type_id">
                                                    <option value="0">Todas</option>
                                                    <c:forEach var="type_medicine" items="${type_medicines.rows}">
                                                        <option value="${type_medicine.id}">${type_medicine.mName}</option>
                                                    </c:forEach>
                                                </select>
                                            </td>
                                            <td>

                                                <input type="button" value="ver" name="button" onclick="searchStock();"/>
                                            </td>
                                        </tr>


                                    </table>
                                    <div id="errorDiv"class="ui-widget">

                                    </div>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

               <div id="results_stock"> </div>

            </div>

        </div>

    </body>
</html>
